import React from 'react'

class Inner extends React.Component {
  state = {
    click: false
  }

  handleClick = () => {
    this.setState({click: !this.state.click})
  }

  componentDidMount() {
    console.log('inner init')
  }

  render() {
    var text = this.state.click ? 'click' : 'not click'
    return (
      <h2 onClick={this.handleClick}>inner component click to toggle {text}</h2>
    )
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: this.props.name,
    };
  }

  static defaultProps = {
    name: "Mr.Yang",
    age: 21,
  };
  static propTypes = {
    name: React.PropTypes.string.isRequired,
    age: React.PropTypes.number.isRequired,
  };

  handleClick = () => {
    console.log('click')
  }

  render() {
    return (
      <div>
        <h1 onClick={this.handleClick}>Hello {this.props.name}, {this.props.age} </h1>
        <Inner />
      </div>
    )
  }
}

export default App
